<template>
    <div class="rank">
        <div class="info">
            <img :src="rankInfo.picUrl" alt="" />
            <span>{{ rankInfo.title }}</span>
            <span>{{ rankInfo.titleDetail }}</span>
            <span>更新时间：{{ updataTime }}</span>
            <van-button type="primary">播放</van-button>
    </div>
    <div class="ranklist">
        <ul>
            <li v-for="(item, id) in rankList" :key="item.id" @click="selectSong(item)">
                <span>{{ id + 1 }}.{{ item.name }}</span>
            </li>
        </ul>
    </div>
</div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            rankList: [], //榜单详情列表
            rankInfo: [], //榜单基本信息
            updataTime:"" //榜单更新时间
        }
    },
    created(){
        this.getData();
    },
    methods:{
        getData(){
            axios.get("/jsososo/top",{
                params:{
                    id: this.$route.params.id
                }
            })
            .then(res => {
                console.log(res.data)
            })
            .catch(err => {
                console.error(error); 
            })
        },
        slectSong(item){
            this.$store.commit("setSinger",item)//action
            const id = item.mid
            this.$router.push({ Path: `/plyer/${id}` })
        }
    }
}

</script>

<style scoped>
.info img{
    width: 50%;
    border-radius: 1rem;
}
.info span {
    display: block;
}
.list li{
    text-align: left;
    margin: 1rem;
}
.list span {
    display: block;
}
</style>